<!doctype html>
<html lang="zh-CN"><head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
    <title>薛尧的博客</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="" />

    
    
    
    <link rel="stylesheet" href="../../../css/theme.min.css">

    
    
    
    
    <link rel="stylesheet" href="../../../css/custom.min.css">
    

    
</head>
<body>
        <div id="content" class="mx-auto"><header class="container mt-sm-5 mt-4 mb-4 mt-xs-1">
    <div class="row">
        
        <div class="col-sm-4 col-12 text-sm-right text-center pt-sm-4">
            <a href="../../../" class="text-decoration-none">
                <img id="home-image" class="rounded-circle"
                    
                        src="https://ueyao.github.io/image-hosting/blog/avatar.png"
                    
                />
            </a>
        </div>
        <div class="col-sm-8 col-12 text-sm-left text-center">
        
            <h2 class="m-0 mb-2 mt-4">
                <a href="../../../" class="text-decoration-none">
                    
                        薛尧
                    
                </a>
            </h2>
            <p class="text-muted mb-1">
                
                    Java Developer | Short Video Creator
                
            </p>
            <ul id="nav-links" class="list-inline mb-2">
                
                
                    <li class="list-inline-item">
                        <a class="badge badge-white " href="../../../about/" title="关于">关于</a>
                    </li>
                
                    <li class="list-inline-item">
                        <a class="badge badge-white " href="../../../post/" title="文章">文章</a>
                    </li>
                
                    <li class="list-inline-item">
                        <a class="badge badge-white " href="../../../categories/" title="分类">分类</a>
                    </li>
                
            </ul>
            <ul id="nav-social" class="list-inline">
                
                    <li class="list-inline-item mr-3">
                        <a href="http://github.com/flowstone" target="_blank">
                            <i class="fab fa-github fa-1x text-muted"></i>
                        </a>
                    </li>
                
                    <li class="list-inline-item mr-3">
                        <a href="mailto:xueyao.me#gmail.com" target="_blank">
                            <i class="fas fa-at fa-1x text-muted"></i>
                        </a>
                    </li>
                
            </ul>
        </div>
    </div>
    <hr />
</header>
<div class="container">
    <div class="pl-sm-2">
        <div class="mb-3">
            <h3 class="mb-0">JS小例子之二级联动</h3>
            
            <small class="text-muted">发布于 2017-08-26</small>
        </div>

        <article>
            <h2 id="联动原理">联动原理</h2>
<p>当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息.</p>
<h2 id="省市数据">省市数据</h2>
<p>把省市数据,保存在js文件中,以json形式保存,以便读取,下面代码使用部分数据,不影响效果</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">china</span> <span style="color:#f92672">=</span> [
</span></span><span style="display:flex;"><span>    {
</span></span><span style="display:flex;"><span>        <span style="color:#e6db74">&#34;p_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;吉林省&#34;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#e6db74">&#34;p_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;jl&#34;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#e6db74">&#34;cities&#34;</span><span style="color:#f92672">:</span> [
</span></span><span style="display:flex;"><span>            {
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;长春&#34;</span>,
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;cc&#34;</span>
</span></span><span style="display:flex;"><span>            },
</span></span><span style="display:flex;"><span>            {
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;四平&#34;</span>,
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;sp&#34;</span>
</span></span><span style="display:flex;"><span>            },
</span></span><span style="display:flex;"><span>            {
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;通化&#34;</span>,
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;th&#34;</span>
</span></span><span style="display:flex;"><span>            },
</span></span><span style="display:flex;"><span>            {
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;松原&#34;</span>,
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;sy&#34;</span>
</span></span><span style="display:flex;"><span>            }
</span></span><span style="display:flex;"><span>        ]
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    {
</span></span><span style="display:flex;"><span>        <span style="color:#e6db74">&#34;p_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;辽宁省&#34;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#e6db74">&#34;p_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;ln&#34;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#e6db74">&#34;cities&#34;</span><span style="color:#f92672">:</span> [
</span></span><span style="display:flex;"><span>            {
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;沈阳&#34;</span>,
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;sy&#34;</span>
</span></span><span style="display:flex;"><span>            },
</span></span><span style="display:flex;"><span>            {
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;大连&#34;</span>,
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;dl&#34;</span>
</span></span><span style="display:flex;"><span>            },
</span></span><span style="display:flex;"><span>            {
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;抚顺&#34;</span>,
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;fs&#34;</span>
</span></span><span style="display:flex;"><span>            },
</span></span><span style="display:flex;"><span>            {
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;铁岭&#34;</span>,
</span></span><span style="display:flex;"><span>                <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;tl&#34;</span>
</span></span><span style="display:flex;"><span>            }
</span></span><span style="display:flex;"><span>        ]
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>{
</span></span><span style="display:flex;"><span>    <span style="color:#e6db74">&#34;p_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;山东省&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#e6db74">&#34;p_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;sd&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#e6db74">&#34;cities&#34;</span><span style="color:#f92672">:</span> [
</span></span><span style="display:flex;"><span>        {
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;济南&#34;</span>,
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;jn&#34;</span>
</span></span><span style="display:flex;"><span>        },
</span></span><span style="display:flex;"><span>        {
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;青岛&#34;</span>,
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;qd&#34;</span>
</span></span><span style="display:flex;"><span>        },
</span></span><span style="display:flex;"><span>        {
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;威海&#34;</span>,
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;wh&#34;</span>
</span></span><span style="display:flex;"><span>        },
</span></span><span style="display:flex;"><span>        {
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;烟台&#34;</span>,
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;yt&#34;</span>
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    ]
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>},
</span></span><span style="display:flex;"><span>{
</span></span><span style="display:flex;"><span>    <span style="color:#e6db74">&#34;p_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;上海市&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#e6db74">&#34;p_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;sh&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#e6db74">&#34;cities&#34;</span><span style="color:#f92672">:</span> [
</span></span><span style="display:flex;"><span>        {
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;闵行区&#34;</span>,
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;mh&#34;</span>
</span></span><span style="display:flex;"><span>        },
</span></span><span style="display:flex;"><span>        {
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;徐汇区&#34;</span>,
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;xh&#34;</span>
</span></span><span style="display:flex;"><span>        },
</span></span><span style="display:flex;"><span>        {
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;黄浦区&#34;</span>,
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;hp&#34;</span>
</span></span><span style="display:flex;"><span>        },
</span></span><span style="display:flex;"><span>        {
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;浦东新区&#34;</span>,
</span></span><span style="display:flex;"><span>            <span style="color:#e6db74">&#34;c_id&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;pd&#34;</span>
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    ]
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>];
</span></span></code></pre></div><h2 id="获取省市数据">获取省市数据</h2>
<p>通过js dom编程读取省市数据,把省市数据读取到对应的select选项中.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#f92672">&lt;!</span><span style="color:#a6e22e">DOCTYPE</span> <span style="color:#a6e22e">html</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">html</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">head</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">title</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">二级联动</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/title&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">meta</span> <span style="color:#a6e22e">http</span><span style="color:#f92672">-</span><span style="color:#a6e22e">equiv</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;content-type&#34;</span> <span style="color:#a6e22e">content</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/html; charset=UTF-8&#34;</span><span style="color:#f92672">&gt;</span> 
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/head&gt;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">body</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>     <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">select</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;province&#34;</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;province&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>       <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">option</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;none&#34;</span><span style="color:#f92672">&gt;--</span><span style="color:#a6e22e">请选择省</span><span style="color:#f92672">--&lt;</span><span style="color:#960050;background-color:#1e0010">/option&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/select&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">select</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;city&#34;</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;city&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>          <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">option</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;none&#34;</span><span style="color:#f92672">&gt;--</span><span style="color:#a6e22e">请选择市</span><span style="color:#f92672">--&lt;</span><span style="color:#960050;background-color:#1e0010">/option&gt;</span>
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/select&gt;</span>
</span></span><span style="display:flex;"><span>      <span style="color:#75715e">&lt;!--</span> <span style="color:#a6e22e">载入省市数据</span> <span style="color:#f92672">--&gt;</span>   
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;cities.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">//获得省级下拉框对象
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">province</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;province&#34;</span>);
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">//遍历省市数据,并把里面省的数据追加到option选项中
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span><span style="color:#f92672">=</span><span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">china</span>.<span style="color:#a6e22e">length</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>) {
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">option</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;option&#34;</span>);
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">option</span>.<span style="color:#a6e22e">value</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">china</span>[<span style="color:#a6e22e">i</span>].<span style="color:#a6e22e">p_id</span>;
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">option</span>.<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">china</span>[<span style="color:#a6e22e">i</span>].<span style="color:#a6e22e">p_name</span>;
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">province</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">option</span>);
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>          <span style="color:#75715e">//省级下拉框发生改变事件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>          <span style="color:#a6e22e">province</span>.<span style="color:#a6e22e">onchange</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>() {
</span></span><span style="display:flex;"><span>            <span style="color:#75715e">//获取当前点击对象的值
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>            <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">proid</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">value</span>;
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">cities</span>;
</span></span><span style="display:flex;"><span>            <span style="color:#75715e">//遍历省市数据,把省级下点击的那一个选项的值和省市数据中的
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>            <span style="color:#75715e">//省级数据对比,如果相等,取出当前的市的数据
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>            <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span><span style="color:#f92672">=</span><span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">china</span>.<span style="color:#a6e22e">length</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>) {
</span></span><span style="display:flex;"><span>                <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">proid</span> <span style="color:#f92672">==</span> <span style="color:#a6e22e">china</span>[<span style="color:#a6e22e">i</span>].<span style="color:#a6e22e">p_id</span>) {
</span></span><span style="display:flex;"><span>                    <span style="color:#a6e22e">cities</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">china</span>[<span style="color:#a6e22e">i</span>].<span style="color:#a6e22e">cities</span>;
</span></span><span style="display:flex;"><span>                }
</span></span><span style="display:flex;"><span>            }
</span></span><span style="display:flex;"><span>            <span style="color:#75715e">//获得市级下拉框对象
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>            <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">city</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;city&#34;</span>);
</span></span><span style="display:flex;"><span>            <span style="color:#75715e">//每次点击省级后,市级初始化,避免高级重复追加
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>            <span style="color:#a6e22e">city</span>.<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;&lt;option value=&#39;none&#39;&gt;--请选择市--&lt;/option&gt;&#34;</span>;
</span></span><span style="display:flex;"><span>            <span style="color:#75715e">//遍历市级数据,并取出市级数据,追加到市级对象中
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>            <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span><span style="color:#f92672">=</span><span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">cities</span>.<span style="color:#a6e22e">length</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>) {
</span></span><span style="display:flex;"><span>                <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">option</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#34;option&#34;</span>);
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">option</span>.<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">cities</span>[<span style="color:#a6e22e">i</span>].<span style="color:#a6e22e">c_name</span>;
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">option</span>.<span style="color:#a6e22e">value</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">cities</span>[<span style="color:#a6e22e">i</span>].<span style="color:#a6e22e">c_id</span>;
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">city</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">option</span>);
</span></span><span style="display:flex;"><span>            }
</span></span><span style="display:flex;"><span>          }
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/body&gt; </span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/html&gt;</span>
</span></span></code></pre></div><p>二级联动效果</p>
<p><img src="https://ueyao.github.io/image-hosting/blog/2017/2017-08-26-123422.gif" alt="二级联动效果图"></p>
<p><a href="https://github.com/flowstone/blog-example-code/tree/master/2017-08-26-js-linkage-effect-example">代码托管于GitHub</a></p>

        </article>
    </div>

    <div id="disqus_thread"></div>
<script>
    window.disqus_config = function () {
    
    
    
    };
    (function() {
        if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
            document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
            return;
        }
        var d = document, s = d.createElement('script'); s.async = true;
        s.src = '//' + "xie-yao-de-bo-ke" + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

            </div>
        </div><footer class="text-center pb-1">
    <small class="text-muted">
        
        &copy; Copyright 2024
        
        |
        <a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备14012079号</a>
        <br />
        由 <a href="https://gohugo.io/" target="_blank">Hugo</a> 强力驱动
        | 主题 <a href="https://github.com/austingebauer/devise" target="_blank">Devise</a>
        <br />

    </small>
</footer></body>
</html>
